<template>
  <div class="header">
    <el-row>
      <el-col :md="12" :xs="24">
        <el-row class="wrapper">
          <el-col>
            <ul class="nav" id="ul">
              <li @click="toPage(1)" id="home"><span>主页</span></li>
              <li @click="toPage(2)" id="songList"><span>推荐歌单</span></li>
              <li @click="toPage(3)" id="list"><span>排行榜</span></li>
              <li @click="toPage(4)" id="mv"><span>MV</span></li>
              <li @click="toPage(5)" id="singer"><span>歌手</span></li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
      <el-col :md="12" :xs="24">
        <el-row style="margin-left: 80px;margin-top: 20px;">
          <el-col>
            <span class="search">
              <el-autocomplete class="keyVal" slot="reference" v-model="keywords" :fetch-suggestions="querySearch"
                placeholder="请输入歌名、歌词、歌手或专辑" clearable @change="change" @input="input"
                @select="handleSelect"></el-autocomplete>
            </span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import SongsApi from '../musicApi/apis/songs'
  export default {
    name: "Mheader",
    data() {
      return {
        restaurants: [],
        keywords: ''
      }
    },
    methods: {
      toPage(pageNumber) {
        //页面数据
        let title = [
          { pageIndex: 1, pageName: "/home" },
          { pageIndex: 2, pageName: "/list" },
          { pageIndex: 3, pageName: "/toplist" },
          { pageIndex: 4, pageName: "/mv" },
          { pageIndex: 5, pageName: "/singer" }
        ]
        // 获取所有的 <span> 元素
        var spans = document.getElementsByTagName("span");
        // 遍历所有的 <span> 元素
        for (var i = 0; i < spans.length; i++) {
          // 将所有的 <span> 元素的颜色重置为默认颜色
          spans[i].style.color = "#333333";
          if (pageNumber - 1 == i) {
            spans[i].style.color = "red";
            this.$router.push({ path: title[pageNumber - 1].pageName })
          }
        }
        // 将点击的 <span> 元素的颜色设置为红色
        var clickedSpan = document.getElementById(pageNumber);
        clickedSpan.style.color = "red";
      },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        SongsApi.getHotList().then(res => {
          let hotArr = []
          let data = res.data.data
          for (let i = 0; i < data.length; i++) {
            let hotObj = {
              value: data[i].searchWord,
              address: data[i].content
            }
            hotArr.push(hotObj)
          }
          this.restaurants = hotArr
        })
        // return [{"value":"暂无"}]
      },
      //选择推荐
      handleSelect(item) {
        this.$router.push({ path: '/search', query: { keywords: item.value } });
      },
      //输入后回车
      change() {
        this.$router.push({ path: '/search', query: { keywords: this.keywords } });
      },
      //输入的值发生改变时
      async input() {

      }
    },
    mounted() {
      this.loadAll();
    },
    computed: {
      watchkeywords() {
        return this.keywords;
      }
    },
    watch: {
      watchkeywords: {
        handler(newStr) {
          SongsApi.getSearchSuggest(newStr).then(res => {
            let songs = res.data.result.songs;//歌曲
            let albums = res.data.result.albums;//专辑
            // let artists=res.data.result.artists;//歌手
            let suggestArr = []
            for (let i = 0; i < songs.length; i++) {
              let suggestObj = {
                value: songs[i].name,
                address: songs[i].artists[0].name
              }
              suggestArr.push(suggestObj)
            }
            this.restaurants = suggestArr;
            console.log(this.restaurants)
            for (let i = 0; i < albums.length; i++) {
              let suggestObj = {
                value: albums[i].name,
                address: albums[i].artists[0].name
              }
              suggestArr.push(suggestObj)
            }
            this.restaurants += suggestArr;

          })
        }
      }
    }

  }
</script>

<style scoped>
  .header {
    position: relative;
    z-index: 2;
    font-size: 0;
    box-shadow: 0 2px 10px 0 rgba(52, 52, 52, .1);
    background: #d1ba74;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }

  .seach .el-autocomplete .el-input__inner {
    padding-left: 10px;
    padding-right: 10px;
  }

  .wrapper {
    display: flex;
    align-items: center;
  }

  .keyVal {
    width: 256px;
    line-height: 16px;
    border: 0;
    border-bottom: 1px solid #d1ba74;
    color: #FFFACD;
  }

  ::v-deep .keyVal .el-input__inner {
    background-color: #FFFACD;
    /* 设置为您想要的背景颜色 */
    /* 其他样式设置 */
  }

  #home {
    color: red;
  }

  /deep/input {
    padding: 0;
    border: none;
  }

  .nav {
    border: 0;
    font-size: 0;
  }

  .nav li {
    display: inline-block;
    padding: 0;
    height: 80px;
    line-height: 80px;
    color: #333333;
    cursor: pointer;
    border-bottom: 2px solid transparent;
  }

  .nav li span {
    padding: 0 10px;
    display: block;
    font-size: 20px;
    text-decoration: none;
  }
</style>